<template>
  <layout title="swiper轮播图">
    <layout-content title="基础使用">
      <tn-swiper :data="swiperData" :custom-style="swiperCustomStyle"></tn-swiper>
      <tn-swiper :data="swiperData" vertical :custom-style="swiperCustomStyle"></tn-swiper>
      <tn-swiper :data="swiperData" height="300" :custom-style="swiperCustomStyle"></tn-swiper>
      <tn-swiper :data="swiperData" height="300" :current="1" :custom-style="swiperCustomStyle"></tn-swiper>
    </layout-content>

    <layout-content title="指示器">
      <tn-swiper :data="swiperData" indicator-mode="rect" :custom-style="swiperCustomStyle"></tn-swiper>
      <tn-swiper :data="swiperData" indicator-mode="round" :custom-style="swiperCustomStyle"></tn-swiper>
      <tn-swiper :data="swiperData" indicator-mode="dot" :custom-style="swiperCustomStyle"></tn-swiper>
      <tn-swiper :data="swiperData" indicator-mode="number" :custom-style="swiperCustomStyle"></tn-swiper>
    </layout-content>

    <layout-content title="指示器位置">
      <tn-swiper :data="swiperData" indicator-mode="round" indicator-position="topLeft" :custom-style="swiperCustomStyle"></tn-swiper>
      <tn-swiper :data="swiperData" indicator-mode="round" indicator-position="bottomRight" :custom-style="swiperCustomStyle"></tn-swiper>
    </layout-content>

    <layout-content title="不衔接播放">
      <tn-swiper :data="swiperData" :circular="false" :custom-style="swiperCustomStyle"></tn-swiper>
    </layout-content>

    <layout-content title="设置时间">
      <tn-swiper :data="swiperData" :duration="300" :custom-style="swiperCustomStyle"></tn-swiper>
      <tn-swiper :data="swiperData" :interval="10000" :custom-style="swiperCustomStyle"></tn-swiper>
    </layout-content>

    <layout-content title="3D效果">
      <tn-swiper :data="swiperData" effect3d :custom-style="swiperCustomStyle"></tn-swiper>
      <tn-swiper :data="swiperData" effect3d :effect3d-spacing="80" :custom-style="swiperCustomStyle"></tn-swiper>
    </layout-content>
  </layout>

  <layout-doc v-model="showDoc" :content="docContent"></layout-doc>
  <doc-fab @click="handleDocFabClick"/>
</template>

<script lang="ts" setup>
import { CSSProperties, ref } from 'vue'
import { docContent } from './lib/doc'
import Layout from '@/components/layout/index.vue'
import LayoutContent from '@/components/layout/content.vue'
import LayoutDoc from '@/components/layout/doc.vue'
import DocFab from '@/components/doc-fab/index.vue'

import TnSwiper from '@/tuniao-ui/components/tn-swiper/src/Swiper.vue'
import { SwiperData } from '@/tuniao-ui/types'

// 自定义轮播图样式
const swiperCustomStyle: CSSProperties = {
  marginTop: '20rpx'
}

// 弹出文档 
let showDoc = ref<boolean>(false)
const handleDocFabClick = () => {
  showDoc.value = true
}

// 轮播图数据
const swiperData: SwiperData[] = [
  {image: 'https://tnuiimage.tnkjapp.com/swiper/spring.jpg', title: '春天'},
  {image: 'https://tnuiimage.tnkjapp.com/swiper/summer.jpg'},
  {image: 'https://tnuiimage.tnkjapp.com/swiper/autumn.jpg'},
  {image: 'https://tnuiimage.tnkjapp.com/swiper/winter.jpg', title: '冬天'}
]
</script>

<style lang="scss" scoped>
</style>
